<template>
  <view class="">
    <uni-file-picker v-model="pictPath"
                     fileMediatype="image"
                     mode="grid"
                     :limit="5"
                     :del-icon="false"
                     @select="uploadSelect" />
  </view>
</template>

<script>
import {
  baseUrl
} from '@/config/evn.js'
import {
  showLoading,
  hideLoading
} from '@/utils/loading.js'
export default {
  data () {
    return {
      pictPath: [],
      filePathArr: [],
      fileName: ''
    }
  },
  watch: {
    pictPath: {
      handler () { },
      deep: true,
      immediate: true,
    }
  },
  methods: {
    uploadDelete (index) {
      console.log(index);

    },
    // clearFiles
    async uploadSelect (e) {
      const tempFilePaths = e.tempFilePaths;
      tempFilePaths.forEach(item => {
        this.upload(item)
      })
    },
    upload (url) {
      showLoading()
      uni.uploadFile({
        url: `${baseUrl}api/common/upload`, //仅为示例，非真实的接口地址
        filePath: url,
        name: 'file',
        formData: {
          'user': 'test'
        },
        success: (uploadFileRes) => {
          hideLoading()
          const data = JSON.parse(uploadFileRes.data);
          if (data.code === 200) {
            this.filePathArr.push(data.fileName)
            this.fileName += (data.fileName + ',');
            this.$emit('uploadSuccess', this.fileName)
            return
          }
          uni.showToast({
            title: '上传失败',
            icon: 'error'
          })
        },
        fail: function () {
          uni.showToast({
            title: '上传失败',
            icon: 'error'
          })
          hideLoading()
        }
      });
    }
  }
}
</script>